<template>
	<view class="page" >
		<form class="content" @submit="formSubmit">
			<view class="unit-wrapper">
				<view class="unit-item">
					<text class="require-star" style="color: red">*</text>
					<view class="unit-item__label">出行方式</view>
					<view class="unit-item__input">
						<picker @change="bindWayChange" :value="wayIndex" :range="ways">
							<view class="uni-input">
								<input style="display: none" name="ways" :value="ways[wayIndex]?ways[wayIndex]:''"/>
								<text>{{ways[wayIndex]?ways[wayIndex]:'（必填）请选择目的地'}}</text>
								<uni-icons type="arrowright"></uni-icons>
							</view>
						</picker>
					</view>
				</view>
				<view class="unit-item" style="margin-bottom: 0">
					<text class="require-star" style="color: red">*</text>
					<view class="unit-item__label">车牌号码</view>
					<input name="car_number" class="unit-item__input" placeholder="（必填）请输入车牌号码"/>
				</view>
			</view>
			<view class="unit-wrapper">
				<view class="unit-item">
					<text class="require-star" style="color: red">*</text>
					<view class="unit-item__label">姓名</view>
					<input name="name" class="unit-item__input" placeholder="请输入真实姓名" v-model="form.name"/>
				</view>
				<view class="unit-item">
					<text class="require-star" style="color: red">*</text>
					<view class="unit-item__label">
						<view>
							<picker @change="bindDocumentTypeChange" :value="documentTypeIndex" :range="documentTypes">
								<view class="uni-input">
									<input style="display: none" name="document_type" :value="documentTypes[documentTypeIndex]?documentTypes[documentTypeIndex]:''"/>
									<text>{{documentTypes[documentTypeIndex]}}</text>
									<uni-icons type="arrowright"></uni-icons>
								</view>
							</picker>
						</view>
					</view>
					<input class="unit-item__input" name="document_number" placeholder="（必填）请输入证件号码" v-model="form.document_number"/>
				</view>
				<view class="unit-item">
					<text class="require-star" style="color: red">*</text>
					<view class="unit-item__label">联系电话</view>
					<input class="unit-item__input" placeholder="（必填）请输入手机号码" name="mobile" v-model="form.mobile"/>
				</view>
				<view class="unit-item">
					<text class="require-star" style="color: red">*</text>
					<view class="unit-item__label">预计到达时间</view>
					<picker class="unit-item__input" picker mode="date" :value="date" placeholder="" :start="startDate" :end="endDate"  @change="bindDateChange">
						<input :value="date" name="arrival_time"/>
					</picker>
				</view>
				<view class="unit-item">
					<text class="require-star" style="color: red">*</text>
					<view class="unit-item__label">来源地</view>
					<view class="unit-item__input">
						<text @tap="openAddres">{{cityText? cityText:"（必填）请选择来源地"}}</text>
						<uni-icons type="arrowright"></uni-icons>
						<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onCityInfoResult"
										themeColor='#007AFF'></simple-address>
						<input style="display: none" :value="fromAddress['provinceCode']" name="from_province_id"/>
						<input style="display: none" :value="fromAddress['cityCode']" name="from_city_id"/>
						<input style="display: none" :value="fromAddress['areaCode']" name="from_area_id"/>
					</view>
				</view>
				<view class="unit-item">
					<text class="require-star" style="color: red">*</text>
					<view class="unit-item__label">目的地</view>

					<view class="unit-item__input">
						<text @tap="openAddresTo">{{cityTextTo? cityTextTo:"（必填）请选择目的地"}}</text>
						<uni-icons type="arrowright"></uni-icons>
						<simple-address ref="simpleAddressTo" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onCityInfoResultTo"
										themeColor='#007AFF'></simple-address>
						<input style="display: none" :value="toAddress['provinceCode']" name="to_province_id"/>
						<input style="display: none" :value="toAddress['cityCode']" name="to_city_id"/>
						<input style="display: none" :value="toAddress['areaCode']" name="to_area_id"/>
					</view>
<!--					<view class="unit-item__input" placeholder="请输入报价单名称" highlightColor="#FF0000">-->
<!--						<picker @change="bindToAreaChange" :value="toAreaIndex" :range="toAreaList" range-key="label">-->
<!--							<view class="uni-input">-->
<!--								<input style="display: none" :value="toAreaList[toAreaIndex]?toAreaList[toAreaIndex].value:''" name="to_area_id"/>-->
<!--								<text>{{toAreaList[toAreaIndex]?toAreaList[toAreaIndex].label:'（必填）请选择目的地'}}</text>-->
<!--								<uni-icons type="arrowright"></uni-icons>-->
<!--							</view>-->
<!--						</picker>-->
<!--					</view>-->
				</view>
				<view class="unit-item">
					<text class="require-star" style="color: red">*</text>
					<view class="unit-item__label">详细地址</view>
					<input class="unit-item__input" name="detail_address" placeholder="（必填）请输入详细地址" highlightColor="#FF0000" />
				</view>
				<view class="unit-item">
					<view class="unit-item__label">工作单位</view>
					<input class="unit-item__input" name="org" placeholder="请填写工作单位" highlightColor="#FF0000" />
				</view>
				<view class="unit-item">
					<text class="require-star" style="color: red">*</text>
					<view class="unit-item__label">体测情况</view>
					<view class="unit-item__input">
						<picker @change="bindSymptomChange" :value="symptomIndex" :range="symptomList" range-key="label">
							<view class="uni-input">
								<input style="display: none" :value="symptomList[symptomIndex]" name="symptom"/>
								<text>{{symptomList[symptomIndex]}}</text>
								<uni-icons type="arrowright"></uni-icons>
							</view>
						</picker>
					</view>
				</view>
				<view class="unit-item">
					<text class="require-star" style="color: red">*</text>
					<view class="unit-item__label">两周内疫情接触情况</view>
					<radio-group class="unit-item__input" @change="radioChange">
						<label class="radio" style="margin-right: 30rpx">
							<radio :value="true"  />
							有</label>
						<label class="radio">
							<radio :value="false" checked="true"/>
							无</label>
					</radio-group>
					<input style="display:none" :value="condition" name="condition"/>
				</view>
			</view>
			<party v-for="i in countArray" :ref="'party'+i"></party>
			<view style="font-size: 0">
				<button type="primary" class="btn-add" @tap="addParty">添加随行人员信息</button>
			</view>
			<view class="end">
				<view style="text-align: left;margin-bottom: 30rpx">
					<checkbox-group @change="checkboxChange">
						<label style="text-align: left">
							<checkbox :checked="agree" value="agree"  color="#FFCC33" />
						</label>
						<text>我已阅读并同意遵守</text>
						<text @click="showPop" style="color: #0093fd">《承诺书》</text>
					</checkbox-group>
				</view>
<!--				<button form-type="submit">提交</button>-->
				<button type="primary" form-type="submit" class="center" style="background-color: #007AFF;">完成</button>
			</view>
		</form>
		<uni-popup ref="showtip" type="center" :mask-click="false">
			<view class="uni-tip" style="width: 80vw">
				<view class="uni-tip-content">
					<agreement :name="form.name" :document-number="form.document_number" :mobile="form.mobile"/>
				</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="cancel()">我承诺自愿遵守</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import inputAutocomplete from '@/components/input-autocomplete/input-autocomplete.vue';
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import simpleAddress from "@/components/simple-address/simple-address.nvue"
	import party from "./party";
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import agreement from "./agreement";

	export default {
		components: {
			inputAutocomplete,
			uniIcons,
			simpleAddress,
			party,
			uniPopup,
			agreement
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				unRead:true,
				agree:false,
				count:0,
				countArray:[],
				condition:false,
				cityPickerValueDefault: [0, 0, 0],
				cityText: '',
				cityTextTo: '',
				date: currentDate,
				documentTypes:["身份证号", '护照', '港澳居民往来内地通行证', '台湾居民来往大陆通行证'],
				documentTypeIndex:0,
				relative: ['父亲', '母亲', '丈夫', '妻子', '儿子', '女儿', '公公', '婆婆', '岳父', '岳母', '朋友'],
				ways: ['自驾', '火车', '飞机', '大巴', '其他'],
				wayIndex:0,
				relativeIndex: 0,
				toAreaIndex:-1,
				symptomIndex:0,
				symptomList:['正常', '发烧', '咳嗽', '发烧+咳嗽'],
				toAreaList: [{
						"label": "玄武区",
						"value": "320102"
					},
					{
						"label": "秦淮区",
						"value": "320104"
					},
					{
						"label": "建邺区",
						"value": "320105"
					},
					{
						"label": "鼓楼区",
						"value": "320106"
					},
					{
						"label": "浦口区",
						"value": "320111"
					},
					{
						"label": "栖霞区",
						"value": "320113"
					},
					{
						"label": "雨花台区",
						"value": "320114"
					},
					{
						"label": "江宁区",
						"value": "320115"
					},
					{
						"label": "六合区",
						"value": "320116"
					},
					{
						"label": "溧水区",
						"value": "320117"
					},
					{
						"label": "高淳区",
						"value": "320118"
					}
				],
				fromAddress: {},
				toAddress: {},
				form: {
					name: "",
					mobile: "",
					document_type: "",
					document_number: "",
					ways: "",
					car_number: "",
					from_province_id: "",
					from_city_id: "",
					from_area_id: "",
					to_area_id: "",
					arrival_time: "",
					org: "",
					status: 0,
					condition: false,
				}
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
		},
		methods: {
			checkboxChange(e){
				const values = e.detail.value;
				this.agree = values.includes('agree');
			},
			checkboxClick(){
				if(this.unRead){
					uni.showToast({title:"请先阅读承诺书", icon:"none"});
				}
			},
			cancel() {
				this.agree = true
				this.unRead = false
				this.$refs.showtip.close()
			},
			showPop(){
				const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
				if(!this.form.name || !this.form.document_number || !this.form.mobile){
					uni.showToast({title:"请先填写完整的姓名，证件号码，手机号!", icon:"none"});
					return
				}
				if(!reg.test(this.form.mobile)){
					uni.showToast({title:"请正确填写手机号码", icon:"none"});
					return;
				}
				this.$refs.showtip.open()
			},
			addParty:function(){
				this.count++
				this.countArray.push(this.count)
			},
			radioChange: function(evt) {
				this.condition = evt.target.value;
			},
			bindSymptomChange(e){
				this.symptomIndex = e.target.value
			},
			bindWayChange(e){
				this.wayIndex = e.target.value
			},
			bindDocumentTypeChange(e){
				this.documentTypeIndex = e.target.value
			},
			bindToAreaChange: function(e) {
				this.toAreaIndex = e.target.value
			},
			onCityInfoResult(e) {
				this.cityText = e.label;
				this.fromAddress = e;
			},
			onCityInfoResultTo(e) {
				this.cityTextTo = e.label;
				this.toAddress = e;
			},
			openAddres() {
				this.$refs.simpleAddress.open();
			},
			openAddresTo() {
				this.$refs.simpleAddressTo.open();
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			check(form){
				const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
				if(!form.car_number){
					uni.showToast({ title: "请输入车牌号码", icon: "none" });
					return false;
				}

				if(!form.name){
					uni.showToast({ title: "请输入您的真实姓名", icon: "none" });
					return false;
				}

				if(!form.document_number){
					uni.showToast({ title: "请输入您的证件号码", icon: "none" });
					return false;
				}

				if(!form.mobile){
					uni.showToast({ title: "请输入您的手机号码", icon: "none" });
					return false;
				}

				if(!reg.test(form.mobile)){
					uni.showToast({ title: "您的手机号码有误", icon: "none" });
					return false;
				}

				if(!this.fromAddress){
					uni.showToast({ title: "请选择来源地", icon: "none" });
					return false;
				}

				if(!form.to_area_id){
					uni.showToast({ title: "请选择目的地", icon: "none" });
					return false;
				}

				if(!form.detail_address){
					uni.showToast({ title: "请填写您的详细地址", icon: "none" });
					return false;
				}
				return true
			},
			formSubmit: function(e) {
				const formData = e.detail.value;
				if(!this.check(formData)){
					return;
				}

				for(let i=1;i<=this.count;i++){
					let s = "party" + i.toString();
					if(!this.$refs[s][0].check()){
						return
					}
				}

				if(!this.agree){
					uni.showToast({title:"请先阅读并同意承诺书", icon:"none"});
					return;
				}

				let party = []
				for(let i=1;i<=this.count;i++){
					let s = "party" + i.toString();
					party.push(this.$refs[s][0].form)
				}

				party = JSON.stringify(party)

				// console.log(formData)
				// console.log(this.$refs["party1"][0].form)
				// console.log("cccccc")
				// console.log(formData)
				// const data2 = this.deepClone(formData)
				// formData['party'] = []
				// formData['party'][0] = data2
				formData['party'] = party
				this.$http.HttpPostForm("MigrantsInfos/", formData).then((res) => {
					if (res.statusCode === 201) {
						uni.showToast({
							title: '提交成功',
							duration: 5000,
							complete: function() {
								uni.redirectTo({
									url: '/pages/index/index'
								});
							}
						});
					}
				})
			},
			deepClone(data){
				const type = (typeof data).toLowerCase();
				let obj;
				if(type === 'array'){
					obj = [];
				} else if(type === 'object'){
					obj = {};
				} else {
					//不再具有下一层次
					return data;
				}
				if(type === 'array'){
					let i = 0, len = data.length;
					for(; i < len; i++){
						obj.push(this.deepClone(data[i]));
					}
				} else if(type === 'object'){
					for(const key in data){
						obj[key] = this.deepClone(data[key]);
					}
				}
				return obj;
			}
		},
	};
</script>

<style>
	.page {
		background-color: #007AFF;
		padding-top: 50rpx;
	}

	.popup-content {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		background-color: #fff;
		padding: 15px;
		font-size: 14px;
	}

	/* 提示窗口 */
	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px;
		width: 300px;
		background-color: #fff;
		border-radius: 10px;
	}

	.uni-tip-title {
		margin-bottom: 10px;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}

	.uni-tip-content {
		/* padding: 15px;
 */
		font-size: 14px;
		color: #666;
	}

	.uni-tip-group-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		margin-top: 20px;
	}

	.uni-tip-button {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}

	.end {
		background-color: #fff;
		padding: 10rpx;
	}

	.content {
		text-align: center;
		height: 100%;
	}

	.pointer:hover {
		cursor: pointer;
	}

	.unit-title {
		font-size: 30upx;
		/* font-style: oblique; */
		color: #fff;
		padding: 16upx 26upx 50upx 26upx;
		padding-bottom: 10upx;
		text-align: left;
	}

	.btn-add {
		background-color: #007AFF;
		/* width: 500rpx; */
		display: inline-block;
		margin-bottom: 20upx;
		border-radius: 100rpx;
	}

	.unit-wrapper {
		box-shadow: 0 0.03rem 0.07rem 0 rgba(0, 49, 91, 0.16);
		padding: 18upx 0;
		margin: 0 30upx;
		margin-bottom: 20upx;
		border-radius: 16upx;
		background-color: #fff;
		color: #000;
	}

	.unit-item {
		display: flex;
		justify-content: flex-end;
		padding-right: 30upx;
		padding-left: 30upx;
		margin-bottom: 30upx;
	}

	.uni-input-placeholder {}

	.unit-item__header {
		margin-top: 0;
		margin-bottom: 8upx;
		padding: 0upx 8upx;
		display: flex;
		justify-content: space-between;
	}

	.unit-item__label {
		padding-top: 2px;
		text-align: left;
		font-size: 28upx;
		margin: 8upx 0 4upx 0upx;
		min-width: 188upx;
		width: 400upx;
	}

	.require-star {
		padding-top: 2px;
		text-align: left;
		font-size: 28upx;
		margin: 8upx 0 4upx 0upx;
	}

	.unit-item__input {
		text-align: right;
		width: 500rpx;
		font-size: 28upx;
		margin: 4upx 16upx 0 4upx;
		border-radius: 12upx;
		min-height: 52.5upx;
		line-height: 52.5upx;
	}
</style>
